<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS.demo</title>
    <!-- 样式生效原则：就近原则 -->
    <link rel="stylesheet" href="demo.css"><!-- 引入外部样式 -->
     <style> /* 内部样式 */
        p {
            color: rgb(0,106,255);/* (这是注释) 这个样式表示颜色 */
            font-size: 30px; /* 这个样式表示字体大小*/
        }
        /* css选择器 */
            /* 1、标签选择器 */
            /* p {
                color: blanchedalmond;
            } */
            /* div {
                color: blueviolet;
            } */
            /* span {
                color: beige;
            } */

            /* 2、class选择器 */
            /* 与标签无关了 */
            .red {
                color: red;
            }
            .blue {
                color: blue;
            }
            .font_size{
                font-size: 32px;
            }

            /* 3、id选择器 */
            #color {
                color: blueviolet;
            }

            /* 4、复合选择器 */ /* 有多个单选器组成 */
            ul li {
                color: brown;
                
            }/* 表示ul标签下的li标签（不一定要“挨着”的关系） */
            ol li a {
                color: rgb(0, 255, 26);
                text-decoration: none
            }/* 可以选择多层标签 */ /*标签之间用" "空格：表示层级关系*/
            .red_,#red-2 {
                color: red;
            }/*标签之间用","逗号：表示选择器A 或者 选择器B*/
            .blue_#blue-2{
                color: blue;
            }/*标签之间没有东西：表示选择器A 并且 选择器B*/
            #blue-1.blue_{
                color: blueviolet;
            }
            /* 5、通配符选择器 */
            *{
                text-align:center;
            }/*初始所有样式*/
    </style>
</head>
<body>
    <p style="color: aquamarine;">段落标签</p><!-- 行内样式-->
    <br>
    <span style="font-weight:900">1、标签选择器</span>
    <div>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <br>
    <span style="font-weight:900">2、class选择器</span>
    <div>
        <span class="blue">111</span>
        <span class="red font_size">222</span>
        <span class="font_size">333</span>
    </div>
    <br>
    <span style="font-weight:900">3、id选择器</span>
    <div>
        <span class="blue">111</span>
        <span class="red font_size">222</span>
        <span class="" id="color">333</span><!-- 原则上id只能有一个 -->
    </div>
    <br>
    <span style="font-weight:900">4、复合选择器</span>
     <ul> <!-- unorder list(无序列表) -->
        <li class="red_" id="red-1">111</li>
        <li class="red-" id="red-2">222</li>
        <li><a href="#">333</a></li>
     </ul>
     <ol> <!-- order list(有序列表) -->
        <li class="blue_" id="blue-1">444</li>
        <li class="blue_" id="blue-2">555</li>
        <li><a href="#">666</a></li>
     </ol>
</body>
</html>